<template>
  <div class="page page2">
    <div class="contain">
      <p class="pageTxt animate__animated animate__flip">文件模块</p>
      <p class='animate__animated animate__slideInDown animate__delay-1s smallTitle'>能够满足日常需求的超大存储空间</p>
      <div class='contents2'>

        <div class='contents2-card animate__animated animate__rollIn animate__delay-1s'>
          <img class="contents2-card-img" src='~/assets/images/01.png'></img>
          <text class="contents2-card-title">上传下载不限速</text>
          <text style="color: gray;">付不付费，都不限速，因为生产力工具不能让人等待太久。</text>
        </div>
        <div class='contents2-card animate__animated animate__rollIn animate__delay-2s'>
          <img class="contents2-card-img" src='~/assets/images/02.png'></img>
          <text class="contents2-card-title">无广告</text>
          <text style="color: gray;">始终是一个优雅安静的地方，没有弹窗或者广告推送。只有当你寻求支持的时候，会发现沟通的入口一直都在那里。</text>
        </div>
        <div class='contents2-card animate__animated animate__rollIn animate__delay-3s'>
          <img class="contents2-card-img" src='~/assets/images/03.png'></img>
          <text class="contents2-card-title">隐私绝对安全</text>
          <text style="color: gray;">不会被圈出来问「这是你吗」，尽管安心地存放一切影像资料。我们运用的人工智能技术，只专注于帮助你提升文件管理效率。</text>
        </div>
        <div class='contents2-card animate__animated animate__rollIn animate__delay-4s'>
          <img class="contents2-card-img" src='~/assets/images/04.png'></img>
          <text class="contents2-card-title">使用方便</text>
          <text style="color: gray;">分享和收藏东西应该更简单，即便是在未登录状态下，你和小伙伴也可以直接预览或者下载对方发送给你的各类文件。</text>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
</script>

<style scoped="scoped">
  .page2 .contents2 {

    display: flex;
    width: 86%;
    justify-content: space-around;
    margin-top: 100px;
  }

  .page2 .contents2-card {
    background-color: #f4fbff;
    border-radius: 10px;
    height: 300px;
    width: 200px;
    padding: 20px;
  }

  .page2 .contents2-card-title {
    font-size: 28px;
    font-weight: 600;
    text-align: center;
  }

  .page2 .contents2-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
  }

  .page2 .contents2-card-img {
    width: 90px;
    height: 60px;
  }

  .smallTitle {
    font-size: 30px;
    text-align: center;
    margin-top: 80px;
  }

  /*平板*/
  @media screen and (min-width:600px) and (max-width:960px) {
    .page2 .contents2 {

      display: flex;
      width: 86%;
      justify-content: space-around;
      margin-top: 100px;
    }

    .page2 .contents2-card {
      background-color: #f4fbff;
      border-radius: 10px;
      height: 410px;
      width: 140px;
      padding: 20px;
    }

    .page2 .contents2-card-title {
      font-size: 20px;
      font-weight: 600;
      text-align: center;
    }

    .page2 .contents2-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
    }

    .page2 .contents2-card-img {
      width: 63px;
      height: 42px;
    }

    .smallTitle {
      font-size: 21px;
      text-align: center;
      margin-top: 56px;
    }
  }

  /*手机*/
  @media screen and (max-width:600px) {
    .page2 .contents2 {
      display: flex;
      flex-direction: column;
      width: 86%;
      align-items: center;
      margin-top: 0;
      font-size: 10px;
    }

    .page2 .contents2-card {
      background-color: #f4fbff;
      border-radius: 20px;
      height: auto;
      width: 86%;
      padding: 10px;
      margin-top: 10px;
    }

    .page2 .contents2-card-title {
      font-size: 20px;
      font-weight: 600;
      text-align: center;
    }

    .page2 .contents2-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
    }

    .page2 .contents2-card-img {
      width: 63px;
      height: 42px;
    }

    .smallTitle {
      font-size: 21px;
      text-align: center;
      margin-top: 10px;
    }
  }
</style>
